<template>
  <div id="app">
      <header>
      <div class="content">
        <section class='logo'></section>
        <nav> 
          <!-- 一级导航 -->
          <ul>
            <li class='active'><router-link to='/homepage/Home'>发现音乐</router-link></li><li><router-link to='/playpage/Play'>我的音乐</router-link> </li><li><router-link to='/songpage/Songs'>朋友</router-link> </li><li><router-link to='/songpage/Mysong'>我的</router-link></li><li>音乐人</li><li>下载客户端</li>
          </ul>
        </nav>
        <!-- 搜索框 -->
        <div class="m-topright">
          <div class='m-input'>
            <input type="text" placeholder="单曲/歌手/专辑/歌单/mv用户">
          </div>
          <!-- <a href="" class='m-email'></a> -->
          <div class="m-msg">
            <a href="javascript:void(0);" v-on:click.stop.prevent='btnlogin' v-if="loginsatat">{{login}}</a>
             <!--<a @click = 'outstate' v-else href="javascript:void(0);">推出</a>-->
            <i></i>
            <div>
                <ul>
                  <i></i>
                  <li>
                    <a href=""><i class="iconfont icon-tuoyuan"></i>手机号登陆</a>
                  </li>
                  <li>
                    <a href=""><i class="iconfont icon-weixindenglu1"></i>微信登陆</a>
                  </li>
                  <li>
                    <a href=""><i class="iconfont icon-weibodenglu"></i>微博登陆</a>
                  </li>
                  <li>
                    <a href=""><i class="iconfont icon-iconfontwangyi"></i>网易邮箱账号登陆</a>
                  </li>
                  <li>
                    <a href=""><i class="iconfont icon-wangyi"></i>qq号登陆</a>
                  </li>

                </ul>
              </div>
          </div>
        </div>
      </div>
    </header>
       <div class="s-pos" v-if="shi">
          <v-login></v-login>
      </div>
  </div>
</template>


<script>
// import Login from './components/homepage/Login'
import Login from './Login'


export default {
  name: 'app',
  data () {
    return {
      msg:'woaini',
      shi:false,
      login:'登陆',
      ok:true,
      loginsatat:true
    }
  },
  components:{
        'v-login' : Login

  },
  methods: {
    btnlogin:function(){
      this.shi = !this.shi;
      let loginsatat = this.loginsatat
      this.$store.commit('Ostate',loginsatat)

    },
    outstate:function(){
      this.ok = true;
    },
    monOut:function(){
      this.ok = this.dis
    }
  },
    computed: {
      songdata () {
        return this.$store.state.songdata
      }
    },
    mounted(){
      this.ok = this.dis
    },
    watch:{
      // ok:'monOut'
    }
    
}


</script>

<style scoped>
.play{
	height: 50px;
	width: 100%;
	position: fixed;
	bottom: 0;
  z-index: 100;
  cursor: pointer;
}
.s-lok{
  position: absolute;
  width: 50px;
  height: 60px;
  right: 8px;
  top: -9px;
  background-position: 0 -385px;
}
.s-lok i{
  display: inline-block;
  width: 10px;
  height: 10px;
  /*border: 1px solid #000;*/
  background-position: -84px -480px;
  position: absolute;
  
}
.m-msg>div>ul{
  z-index: 99;
}

</style>
